
import React, { Fragment } from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
//import {depthData} from '../../../config/depthData';

export const EchartsShow = () => {   // 接收传入的属性

    var data = [];
    var dataCount = 10;
    var startTime = 0;   // x轴坐标
    var categories = ['categoryA'];  // y轴坐标
    var types = [                         // 填充不同颜色
        {name: 'JS Heap', color: '#7b9ce1'},
        {name: 'Documents', color: '#bd6d6c'},
        {name: 'Nodes', color: '#75d874'},
        {name: 'Listeners', color: '#e0bc78'},
        {name: 'GPU Memory', color: '#dc77dc'},
        {name: 'GPU', color: '#72b362'}
    ];
    
    
    // // 数据映射的 逻辑规则
    // function renderItem(params, api) {    //  params：包含了当前数据信息和坐标系的信息。 api：是一些开发者可调用的方法集合。
    //     //console.log("weidu",api.value(0),api.value(1),api.value(2))  //  0 1604565117629 1604565127362
        
    //     var start = api.value(0);  //api.coord()意思是进行坐标转换计算。表示 dataItem 中的数值转换成坐标系上的点。
    //     //console.log("start",start);
    //     var end = api.value(1);
    //     //console.log("end",end);
    //     var height = api.value(1) - api.value(0);
    //     console.log("height",start,end,height,api.style());   // [0, 226.66666666666666]  136
    
    //     var rectShape = echarts.graphic.clipRectByRect({
    //         y: start[0],
    //         x: start[1] - width / 2,
    //         height: end[0] - start[0],
    //         width: width
    //     }, {
    //         y: params.coordSys.y,
    //         x: params.coordSys.x,
    //         width: params.coordSys.width,
    //         height: params.coordSys.height
    //     });
    
    //     return {//rectShape && 
    //         type: 'rect',
    //         shape: rectShape,
    //         style: api.style()
    //     };
    // }
  
  const option = {
    tooltip: {   //提示框浮层内容格式器: 回调函数
        formatter: function (params) {    //??????? 怎么来的呢？？？？？
            return params.marker + params.name + ': ' + params.value[3] + ' ms';   // 颜色 + 颜色名称 + ：+ 数据 + ms
        }
    },
    yAxis: {
        type: 'value',  // category：类目轴，离散的类目数据
        min: 0,
        max: 100,
        inverse : true,  // 倒序
        scale: true,   //是否是脱离 0 值比例。只在数值轴中（type: 'value'）有效。
    },
    xAxis: {
        type: 'category',    // value: 数值轴，连续数据  => 最终只规定 起始值 和 终值     
        data: ['岩性分层'],   // ['categoryA',]
    },
    series: [{
        type: 'custom',   // 自定义类型
        //renderItem: renderItem,   // custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem。
        itemStyle: {
            opacity: 0.8   // 透明度
        },
        encode: {
            y: [0,1],   //维度1、2映射到x轴
        },
        data: [  {name: "Documents", value: [10, 20], itemStyle:{normal:{color: "#e0bc78"}}},
                 {name: "GPU Memory", value: [55, 80], itemStyle:{normal:{color: "#dc77dc"}}},
              ]
             
    }]
  };
  

  return (
    <div style={{width:1000,height:800}}>
      <ReactEcharts
        option={option}
        style={{height:'100%',width:'100%'}}
      />
    </div>  
  )
};



